<template>
  <div class="collect-article">
    <van-icon
          :color="articleColle ? '#ffa500' : '#777'"
          :name="articleColle ? 'star' : 'star-o'"

          :loading="loading"
          @click="onCollect"
        /> 
  </div>
</template>

<script>
import {addCollect,delCollect} from '@/api/article'
export default {
    name:'CollectArticle',
    model:{
        prop:'articleColle',
        event:'cheack'
    },
    props:{
        articleColle:{
            type:Boolean,
            required:true
        },
        articleID:{
            type:[Number,String,Object],
            required:true
        }
    },
    data() {
        return {
            loading: false
        }
    },
    methods:{
        async onCollect(){
            this.loading = true
            try{
                if(this.articleColle){
                    //已收藏，取消收藏
                    await delCollect(this.articleID)
                }else{
                    //未收藏，添加收藏
                    await addCollect(this.articleID)
                }

                //更新视图
                this.$emit('cheack',!this.articleColle)
                this.$toast.success(!this.articleColle ? '收藏成功': '取消收藏成功')
            }catch(err){
                this.$toast.fail('操作失败，稍后重试')
            }
            this.loading = false
        }
    }
}
</script>

<style>

</style>